<template>
  <div>
    <el-form ref="myform1" :model="formItem" label-width="80px" size="mini" class="form-view">
      <div>
        <el-divider content-position="left"><i class="el-icon-document" /><span>交班信息</span></el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属部门" prop="orgCode">
              {{ formItem.orgName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交班人" prop="upUserName">
              {{ formItem.upUserName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交班时间" prop="upTime">
              {{ formItem.upTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交班备注" prop="upNote">
              {{ formItem.upNote }}
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-divider content-position="left"><i class="el-icon-document" /><span>接班信息</span></el-divider>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="接班人" prop="downUserName">
              {{ formItem.downUserName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接班时间" prop="downTime">
              {{ formItem.downTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接班备注" prop="downNote">
              {{ formItem.downNote }}
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-divider content-position="left"><i class="el-icon-document" /><span>交接事项</span></el-divider>
        <el-row :gutter="20">
          <el-col v-for="(item,index) in formItem.items" :key="index" :span="12">
            <el-form-item :label="item.name">
              {{ item.value }}
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import { detail } from '@neu/dcom-ui/api/handover'
import { formatDate } from '@neu/biz-core/utils/utils'
// 定义一个表单原始项
const formItem = {
  orgName: '',
  orgCode: null,
  upUserName: '',
  upUserCode: '',
  upTime: new Date(),
  upNote: '',
  downUserName: '',
  downUserCode: '',
  downTime: '',
  downNote: '',
  status: 'created',
  items: []
}
export default {
  name: 'ViewForm',
  props: {
    // 根据id可判断是新建还是更新
    id: {
      required: false,
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      // 编辑的表单内容
      formItem: {
        ...formItem
      }
    }
  },
  watch: {
    // 监控id的变化，初始化表单数据
    id: {
      handler() {
        this.fetch()
      },
      immediate: true
    }
  },
  methods: {
    // 初始化表单数据
    fetch() {
      if (this.id !== -1) {
        detail(this.id).then(response => {
          response.data.upTime = formatDate(response.data.upTime, 'YYYY-MM-DD HH:mm')
          response.data.downTime = formatDate(response.data.downTime, 'YYYY-MM-DD HH:mm')
          this.formItem = {
            ...response.data
          }
        })
      } else {
        this.formItem = {
          ...formItem
        }
      }
    },
    reset() {
      this.$refs.myform1.resetFields()
    }
  }
}
</script>
